<template>
  <div  id="modal-box" @html="html" @click="sure()" :class="modalClass" >
    <div id="content" @click.stop="">
        <div class="window" @click.stop>
          <div id="text" v-html="text"> </div>
          <button @click="sure()" class="confirm">确定</button>
        </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'introduceDialog',
    data(){
      return{
       modalClass: 'modal-hide',
       text: '',
       showCover : false,
       timeout : null,
      }
    },
    props: {
      'html': {
        /*内容*/
        type: String,
        default: ''
      },
    },
    mounted() {
      this.text = this.html || this.text;
    },
    methods:{
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      changeHtml( html ){
        //可以替换文本
        this.text = html || this.text;
      },
      sure(){
        let thiz = this;
        this.hide();
      },
      dialogShow(){
        /*显示弹窗*/
        this.show();
      }
    }
  }
</script>
<style lang="less" scoped>
	@import '../common/style/common';
  /*动画*/
  .window{
    padding:0px;height:auto;
    background: #fff;border-radius: 4px;overflow: hidden;
    width:  100%;box-sizing: border-box;
  }
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;padding-top: 0;padding-bottom: 0;
  }
  #content{
      padding:24px;top:50%;background: #fff;border-radius: 4px;z-index: 6;
      width:  472px;left: 50%;margin-left:-236px;box-sizing: border-box;
      overflow:hidden;.borderRadius;position: absolute;height: 560px;margin-top: -280px;
  }
  #text{
    height: 463px;overflow-y: scroll;width: 100%;
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  #text::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #text::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滚动条轨道 内阴影+圆角*/
  #text::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滑块 内阴影+圆角*/

  .confirm{
    .submit;border-radius: 4px;font-size: 16px;height: 40px;line-height: 40px;margin-top: 15px;;
  }
   @import "../common/style/animate.css";
</style>
